<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-01 09:45:07
 * @LastEditTime : 2021-09-07 15:48:05
 * @FilePath     : /smallnewhope/src/page/luckDraw/index.vue
 * @Description  :  抽奖
-->

<script setup lang="ts">
import { ref } from "vue";
import { Mask, Reward, AmountOfMoney } from "/@/components/index";
import { useHttp } from "/@/hooks/http";
import { useUserInit } from "/@/hooks/userInit";
import { getSrc, getPrizeID } from "/@/utils/prizeClassification";
import { useGo } from "/@/hooks/go";
import { Video, TenYuan, Other, Shake } from "./components/index";
import clickToDraw from "/@/assets/images/clickToDraw.png";
import gameInstructions from "/@/assets/images/gameInstructions.png"; // 奥特兰牛奶 10元优惠卷
import receive from "/@/assets/images/receive.png"; // 获取领取button
import subcodeWinningMilk from "/@/assets/images/subcodeWinningMilk.png"; // 低脂奥特兰奶一箱 -> 填写收奖信息领取
import subcodeNecklace from "/@/assets/images/subcodeNecklace.png"; // 项链
import subcodeAltlandDiamonds from "/@/assets/images/subcodeAltlandDiamonds.png"; // 钻石
import shake from "/@/assets/images/shake.png"; // 摇一摇
import luckyDraw from "/@/assets/images/luckyDraw.png"; // 抽奖中
import winALottery from "/@/assets/images/winALottery.png"; //
import clickBack from "/@/assets/images/clickBack.png";
interface httpResponse {
  data: {
    award: {
      id: string;
      title: string;
      type: string;
      pic: string;
    };
    value: string;
  };
  message: string;
  msg: string;
  success: number;
}
const [send] = useHttp();
const [userInit] = useUserInit();
const [go] = useGo();
const other = ref("");
const id = ref(0);
const prizeNumber = ref(3); // 0 = 牛奶十元优惠卷 1 = 现金奖励
const showShake = ref(false);
const code = ref('') // 邀请码
const httpResponseData = ref<null | httpResponse>(null);
const startDraw = ref(true); // 准备抽奖 === 进入首页
const m = ref('')
async function clickToDrawHandler() {
  startDraw.value = false;
  // 显示抽奖动画
  showShake.value = true;
  const result = await send<httpResponse>({
    // url: "i=3&logout=1&action=codeaward",
    method: "POST",
    params: {
      i: 3,
      logout: 1,
      action: 'codeaward'
    },
    data: {
      // @ts-ignore
      qrcode: window.qrcode
    }
    // params: {
    //   i: 3,
    //   logout: 1,
    //   action: "codeaward"
    //   // @ts-ignore
    //   // qrcode: window.qrcode,
    // },
  });
  if (result) {
    if (result.data.success === 0) {
      // 抽过奖了
      // alert(result.data.message);
      go({ name: "played" });
    }
    httpResponseData.value = result.data;
    code.value = result.data.data.value
  } else {
    alert("网络好像开了一点小差");
  }
  prizeNumber.value = 0;
}

function clickBackHandler() {
  startDraw.value = true;
  prizeNumber.value = 3;
  id.value = 0
}
async function ShakeHandler() {
  if (!httpResponseData.value) {
    alert("还在抽奖中！请稍后！");
    return;
  }
  await userInit();
  other.value = getSrc(httpResponseData.value.data.award.type);
  id.value = getPrizeID(httpResponseData.value.data.award.type);
  if (id.value === 5) {
    m.value = httpResponseData.value.data.value
  }
  // 取消抽奖动画
  showShake.value = false;
  startDraw.value = true;
}
</script>
<template>
  <div class="luckDraw">
    <!-- 腾讯优惠卷 -->
    <Video v-if="id === 4" :code="code" />

    <!-- 酸奶十元优惠卷 -->
    <TenYuan v-if="id === 6" />
    <!-- 项链,钻石,牛奶一箱  -->
    <!-- <Other :src="subcodeNecklace" /> -->
    <Other v-if="id === 1" :src="other" />
    <Other v-if="id === 2" :src="other" />
    <Other v-if="id === 3" :src="other" />
    <Shake @onShake="ShakeHandler" v-if="showShake" :src="luckyDraw" />
    <img @click="clickToDrawHandler" v-if="startDraw" :src="clickToDraw" alt="button" class="btnAn" />
    <!-- <img v-if="prizeNumber === 0" :src="gameInstructions" alt="10" class="winThePrize" /> -->
    <!-- <img v-if="prizeNumber === 0" :src="receive" alt="receive" class="doawButton" /> -->
    <Mask v-if="id === 5" />
    <AmountOfMoney v-if="id === 5" :code="m" />
    <!-- <img v-if="id === 5" :src="winALottery" alt="现金奖励" class="cashRedEnvelope" /> -->
    <img v-if="id === 5" :src="clickBack" alt="点击返回" class="doawButton" @click="clickBackHandler" />
  </div>
</template>

<style lang="scss" scoped>
.btnAn {
  -webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    both;
  animation: slide-in-blurred-top 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@-webkit-keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateX(-50%) translateY(-1000px) scaleY(2.5)
      scaleX(0.2);
    transform: translateX(-50%) translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateX(-50%) translateY(-1000px) scaleY(2.5)
      scaleX(0.2);
    transform: translateX(-50%) translateY(-1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

.luckDraw {
  position: relative;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/bkg/lottery.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  img {
    position: absolute;
    left: 50%;
    bottom: 102px;
    transform: translateX(-50%);
    width: 152px;
    height: 36px;
  }
  .doawButton {
    width: 152px;
    height: 36px;
    position: absolute;
    // bottom: 102px;
    top: 602px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
  }
  .cashRedEnvelope {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 317px;
    height: 562px;
    z-index: 101;
  }
}
</style>
